<script setup lang="ts">
import { ref } from "vue";
import { AddAchievFormProps } from "../utils/types";

const props = withDefaults(defineProps<AddAchievFormProps>(), {
  formInline: () => ({
    id: null,
    isIndex: 0,
    overAchievements: "",
    scrAchievementsIds: [],
    horizontalProjectIds: [],
    otherObtainRewardIds: [],
    achievementTransformationIds: [],
    longitudinalProjectIds: [],
    paperIds: [],
    patentIds: [],
    achievementsType: ""
  }),
  selectOpt: {}
});

const form = ref(props.formInline);

function getForm() {
  return form.value;
}

defineExpose({ getForm });
</script>

<template>
  <div class="choose-achiev">
    <h4 class="mb-1">选择成果</h4>
    <div class="pl-14">
      <!-- <div class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">成果类型</div>
        <el-input v-model="form.achievementsType" placeholder="请输入" />
      </div> -->
      <div v-if="form.isIndex == 1" class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">科研成果</div>
        <el-select
          v-model="form.scrAchievementsIds"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.selectOpt.kycgList"
            :key="item.id"
            :label="item.scrAchievementsName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">横向项目</div>
        <el-select
          v-model="form.horizontalProjectIds"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.selectOpt.hxList"
            :key="item.id"
            :label="item.verticalProjectName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">纵向项目</div>
        <el-select
          v-model="form.longitudinalProjectIds"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.selectOpt.zxList"
            :key="item.id"
            :label="item.verticalProjectName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">论文</div>
        <el-select
          v-model="form.paperIds"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.selectOpt.lwList"
            :key="item.id"
            :label="item.paperName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">专利</div>
        <el-select
          v-model="form.patentIds"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.selectOpt.zlList"
            :key="item.id"
            :label="item.patentName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">科研获奖</div>
        <el-select
          v-model="form.otherObtainRewardIds"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.selectOpt.hjList"
            :key="item.id"
            :label="item.rewardName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="flex items-center mb-3">
        <div class="w-[165px] text-orange-500">成果转化</div>
        <el-select
          v-model="form.achievementTransformationIds"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.selectOpt.cgzhList"
            :key="item.id"
            :label="item.patentName"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.choose-achiev {
  border: 1px solid #efefef;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
</style>
